<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    *{
        margin: 5px;
        padding:5px;
    }
    /* 设置页面与边框之间的距离 */
input{
    appearance: none;
    /* 清除单选框的默认样式 */
    width: 60px;
    height: 60px;
    border: solid black ;
    margin: 4px;
}
input :nth-child(1){
   background-color: blue;
}
input:nth-child(1):checked~div{
    background-color: blue;
}
input:nth-child(2){
    background-color: aqua;
}
input:nth-child(2):checked~div{
    background-color: aqua;
}
input:nth-child(3){
    background-color: brown;
}
input:nth-child(3):checked~div{
    background-color: brown;
}
input:nth-child(4){
    background-color: blueviolet;
}
input:nth-child(4):checked~div{
    background-color: blueviolet;
}
input:nth-child(5){
    background-color: blue;
}

input:nth-child(5):checked~div{
    background-color: blue;
}

div{
    font-size: 60px;
    width: 400px;
    height: 300px;
    background-color:aquamarine;
    border: rgb(15, 15, 15) solid 9px;
}
</style>
</head>
<body>
<input type="radio" name="select">
<!-- 设置元素为单选框 -->
<input type="radio" name="color">    
<input type="radio" name="color">
<input type="radio" name="color">
<input type="radio" name="color">
<div>我是颜色</div>
</body>
</html>